<template>
  <div>
    <el-dialog
      title="导入"
      width="800px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <ul>
          <li>
            <div>1、下载模板文件</div>
            <div class="Download btn" @click="dowmload()">下载导入模板</div>
          </li>
          <li>
            <div>2、上传编辑完成的信息文件</div>
            <div>目前支持的文件类型为 *.xls，*.xlsx 且不超过10M。</div>
            <el-upload
              class="upload-demo"
              :action="action"
              :before-upload="handleBeforeUpload"
              :on-remove="handleRemove"
              multiple
              :limit="1"
              :file-list="fileList"
              :on-success="handleSuccess"
              accept=".xlsx,.xls,"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">
                只能上传.xlsx/.xls文件，且不超过10M
              </div> -->
            </el-upload>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadDomain from "@/utils/uploadDomain";
import { wishImport } from "@/api/wish.js";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      action: `${uploadDomain}backend/upload/upload`,
      fileList: [],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    dowmload() {
      window.open(`${this.$resDomain}/template/心愿导入模版.xlsx`);
    },
    handleBeforeUpload(file) {
      if (file.size > 1048576 * 10) {
        this.$message.warning("请上传小于10MB的文件");
        return false;
      }
      const suffix = file.name?.slice(file.name?.lastIndexOf(".") + 1);
      const reg = /xlsx|xls/i;
      if (!reg.test(suffix)) {
        this.$message.warning("仅支持xls、xlsx格式的图片！");
        return false;
      }
    },
    handleRemove(file) {
      console.log(this.fileList);
      const findex = this.fileList.findIndex((item) => item.url == file.url);
      if (findex > -1) {
        this.fileList.splice(findex, 1);
      }
    },
    handleSuccess(res, file, fileList) {
      this.fileList.push({
        name: res.data,
        url: res.data,
      });
      console.log(this.fileList);
    },
    onSubmit() {
      if (this.fileList.length == 0) {
        this.$message({
          type: "warning",
          message: "请上传文件",
        });
        return;
      }
      let path = this.fileList[0].url;
      wishImport({ path }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.$emit("handleClose", true);
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang='less' scoped>
.dialogBody {
  ul {
    color: #333;

    li {
      background-color: #f2f6ff;
      padding: 10px 19px 12px;
      padding-bottom: 24px;
      margin-bottom: 30px;

      div {
        margin: 14px 0;
        font-size: 16px;
      }

      .btn {
        padding: 7px 20px;
        background-color: #349ff4;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        border-radius: 4px;
        margin: 9px 0 0;
        display: inline-block;
      }

      .Download {
        padding-left: 0;
      }
    }

    li:nth-of-type(1) {
      .btn {
        background: none;
        color: #349ff4;
      }
    }
  }
}
</style>